<template>
    <div class="person">
        <h2>{{sum}}</h2>
        <button @click="changeSum()">改变sum的值</button>
   
    </div>

</template>

<script setup lang="ts" name="Person">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
let sum=ref(0)
function changeSum(){
    sum.value+=1
}
console.log("setup...")

onBeforeMount(()=>{
    console.log("元素挂载前...onBeforeMount")
})
onMounted(()=>{
    console.log("元素挂载完毕...onMounted")
})
onBeforeUpdate(()=>{
    console.log("元素更新前...onBeforeUpdate")
})
onUpdated(()=>{
    console.log("元素更新完毕...onUpdated")
})
onBeforeUnmount(()=>{
    console.log("组件卸载前...onBeforeUnmount")
})
onUnmounted(()=>{
    console.log("组件卸载完成...onUnmounted")
})


</script>
<!-- 在style标签中，加上scoped属性，则表示当前的样式做作用于当前页面 -->
<style scoped>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>